<template>
	<div class="order-goods">
		<div class="list">
			<div class="goods" v-for="goods in list" :key="goods.id">
				<p class="name">{{ goods.name }}</p>

				<div class="specs">
					<div class="item" v-for="item in goods.children" :key="item.id">
						<cl-image :src="item.cover" :size="60" />

						<div class="det">
							<p class="name">{{ item.spec.name }}</p>
							<p class="flex1"></p>
							<p class="price">
								<span>¥{{ item.spec.price }}</span>
								<span>x{{ item.count }}</span>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="order-goods">
import { isEmpty } from "lodash-es";
import { PropType, computed } from "vue";

interface Item {
	id: number;
	name: string;
	children: Eps.GoodsInfoEntity[];
}

const props = defineProps({
	scope: {
		type: Object as PropType<Eps.OrderInfoEntity & { goodsList?: any[] }>,
		default: () => ({})
	}
});

const list = computed(() => {
	const arr: Item[] = [];

	props.scope.goodsList
		?.filter((e) => !!e)
		.forEach((e) => {
			// 封面图
			let pics = e.spec.images || [];
			if (isEmpty(pics)) {
				pics = [e.goodsInfo.mainPic];
			}
			e.cover = pics[0];

			const d = arr.find((a) => a.id == e.goodsInfo.id);

			if (d) {
				d.children?.push(e);
			} else {
				arr.push({
					id: e.goodsInfo.id!,
					name: e.goodsInfo.title!,
					children: [e]
				});
			}
		});

	return arr;
});

console.log(props.scope);
</script>

<style lang="scss" scoped>
.order-goods {
	.list {
		display: flex;
		flex-wrap: wrap;

		.goods {
			margin-left: 10px;

			& > .name {
				font-size: 14px;
				margin-bottom: 5px;
				padding: 0 2px;
				height: 20px;
				max-width: 200px;
				box-sizing: border-box;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}

			.specs {
				display: flex;
			}

			.item {
				display: flex;
				align-items: center;
				font-size: 12px;
				position: relative;
				border: 1px solid var(--el-bg-color-page);
				border-radius: 6px;
				padding: 10px;
				height: 80px;
				width: 250px;
				margin-right: 10px;

				.cl-image {
					margin-right: 10px;
					border-radius: 6px;
					overflow: hidden;
				}

				.det {
					display: flex;
					flex-direction: column;
					flex: 1;
					height: 100%;
					padding: 2px 0;

					.name {
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.flex1 {
						flex: 1;
					}

					.price {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}
		}
	}
}
</style>
